<!-- 订单详情 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label mb10">订购信息</p>
        <div class="dfdsretxdftrt mt10">
            <div>
                用户UID:{{ ret.userId }}

            </div>
            <div>
                用户姓名: {{ ret.userName }}

            </div>
            <div>
                手机号码: {{ ret.userPhone }}

            </div>
            <div>
                产品编号: {{ ret.orderId }}

            </div>
            <div>
                产品名称: {{ ret.name }}

            </div>
            <div>
                状态: {{kjdfdsf(ret)  }}

            </div>
            <!-- <div>
                订购类型: 周卡

            </div> -->
        </div>
        
        
        <n-tabs type="line" animated class="mt20">
            <!-- <n-tab-pane name="扣款信息" tab="扣款信息">
                
              

            </n-tab-pane> -->
            <n-tab-pane name="履约计划" tab="履约计划">
                <div class="zxczxcrt">
                    <n-data-table :border="true" :columns="lycolumns" :data="ret.deductionPlanList" :bordered="false" />
                </div>
            </n-tab-pane>
          
        </n-tabs>


    </div>
</template>
<script lang='ts' setup>
import { dxget, hf, qurl, callBack, dxpost } from "../../util/index";
import { ref, render,h } from 'vue'
import { apiUrl } from "../../util/config";
const cz =qurl()
const ret= ref({})
let jcfdsfs = [
  { label: '全部', value: '' },
  { label: "订购中", value: "init" },
  { label: "正常", value: "available" },
  { label: "已用完", value: "used_up" },
  { label: "关闭中", value: "closing" },
  { label: "已关闭", value: "closed" },

]
let jcfdsxe = [
{ label: '待使用', value: 'WAIT_USE' },
{ label: '扣款失败', value: 'DEDUCTION_FAILED' },
{ label: '扣款成功', value: 'DEDUCTION_SUCCESS' },
{ label: '已退款', value: 'REFUND' },
{ label: '已取消', value: 'CANCELED' },
]
const lycolumns =ref(
  [
    { title: '期数', key: 'period',align: "center" },
    { title: '计划扣款时间	', key: 'planDeductionTime',align: "center"  },
    { title: '扣款金额	', key: 'deductionAmount',align: "center" ,
        render(row) {
            return h('div',{class:'dfsfsdrtrt'},row.deductionAmount/1000)
         }
     },
    { title: '状态', key: 'deductionPlanStatus',align: "center" , 
    render (row) {
        try{
            return jcfdsxe.filter(a => a.value == row.deductionPlanStatus)[0].label
        }catch(e){
            
        }
    } },
   
    
]
)
const init = async()=>{
    const {data} = await dxget('meirong/wantu/merchantcardquery',{
        cardId:cz.cardId,
        userId:cz.userId,
        openId:cz.openId
    })
    ret.value = data.cardOrderInfo
    console.log(data);
}
init()
const kjdfdsf =(row)=>{
    try{
        let kjdfds = jcfdsfs.filter(a => a.value == row.cardStatus)[0].label
    return kjdfds
    }catch(e){
        return ''
    }
}
</script>
<style scoped>
.dfdsretxdftrt {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
</style>